@import './public.less';

.teacher-box {
  background-color: #eeeeee;
  .teacher-head {
    position: relative;
    height: 5rem;

    .teacher-banner {
      height: 100%;
      background-position: 50% 50%;
      background-size: cover;
    }

    .card {
      position: absolute;
      left: 30/75rem;
      right: 30/75rem;
      top: 211/75rem;
      padding: 0 33/75rem 25/75rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 8px 1px rgba(153, 153, 153, 1);
      border-radius: 7px;
      z-index: 1;

      .card-picture {
        position: absolute;
        top: -115/75/2rem;
        left: 50%;
        width: 115/75rem;
        height: 115/75rem;
        margin-left: -115/75/2rem;
        border-radius: 50%;
        overflow: hidden;
        background-position: 50% 50%;
        background-size: cover;
      }

      .card-tip {
        padding-top: 80/75rem;
        text-align: center;
        font-size: 30/75rem;
        font-weight: bold;
        color: rgba(1, 1, 1, 1);
      }

      .card-itme {
        padding: 23/75rem 0;
        font-size: 26/75rem;
        justify-content: space-between;
        border-bottom: 0.5px solid rgba(153, 153, 153, 1);

        .card-title {
          font-weight: bold;
        }

        .card-conten {
          font-weight: bold;
          color: rgba(0, 0, 0, .5);
        }
      }
    }
  }

  .gary-box {
    height: 3.413rem;
  }

  .tipsicon {
    margin-left: 18/75rem;
    margin-right: 8/75rem;
    width: 11/75rem;
    height: 27/75rem;
    background: rgba(71, 135, 228, 1);
  }

  .tips-text {
    font-size: 30/75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }

  .teacher-result {
    margin-bottom: 20/75rem;
    padding: 20/75rem 0 35/75rem 0;
    background-color: #ffffff;

    span {
      display: inline-block;
    }

    .result-content {
      padding: 25/75rem 35/75rem 0;
      line-height: 45/75rem;
      font-size: 24/75rem;
      font-weight: 300;
      color: rgba(0, 0, 0, 1);
    }
  }

  .class-card {
    margin: 0 30/75rem;
    margin-bottom: 30/75rem;
    padding: 30/75rem 15/75rem;
    box-shadow: 0px 3px 7px 0px rgba(153, 153, 153, 0.59);
    border-radius: 20/75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .class-type {
      padding: 4/75rem 12/75rem;
      font-size: 24/75rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(71, 135, 227, .5);
      border-radius: 8/75rem;
    }

    .card-tip {
      font-weight: 400;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }

    .card-time {
      margin-top: 20/75rem;
      font-weight: 24/75rem;
      font-weight: 300;
      color: rgba(0, 0, 0, 0.6);
    }

    .class-insert,
    .class-place {
      font-size: 18/75rem;
      font-weight: bold;
      color: rgba(0, 0, 0, .9);
    }

    .class-insert {
      border: 1px solid transparent;
      margin: 20/75rem 0;
    }

    .class-place {
      margin: 17/75rem 0 10/75rem 0;
    }
  }

  .classics-box {
    padding: 20/75rem 0 35/75rem 0;
    background-color: #ffffff;
    .classics-content{
        justify-content: space-between;
        padding: 0 30/75rem;
        .item{
            width: 48.5%;
            margin-bottom: 10px;
        }
    }
  }
}
